// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.product-box {
  @_top: product-box;

  display: block;
  background-size: cover;
  background-position: center;
  background-color: hsla(var(--hsl-b4), 0.25);
  .link-white();
  .link-plain();
  position: relative;

  &::before {
    .default-box-shadow();
    background-color: fade(#000, 50%);
  }

  &:hover::before {
    opacity: 0;
  }

  &::after {
    .thicker-box-shadow();
    opacity: 0;
  }

  &:hover::after {
    opacity: 1;
  }

  &--card {
    padding: 20px;

    &::before,
    &::after {
      .full-size();
      content: "";
      will-change: opacity;
      transition: opacity 120ms;
      pointer-events: none;
    }
  }

  &--card-large {
    height: 300px;
    grid-column-start: 1;
    grid-column-end: -1;
    order: -1;
  }

  &--card-small {
    height: 200px;
  }

  &--header {
    .default-gutter-v2();
    height: 300px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  &--oos {
    order: 1;
  }

  &__text {
    will-change: opacity;

    .@{_top}:hover & {
      opacity: 0;
    }
  }

  &__oos-bar {
    width: 233px;
    height: 136px;
    .at2x-simple("~@images/layout/store-out-of-stock-bar.png");
    background-size: contain;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    display: none;

    .@{_top}--oos & {
      display: block;
    }
  }
}
